<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#id1{
				width: 50px;
				height: 50px;
				background-color: #006400;
			}
			#id2{
				width: 50px;
				height: 50px;
				background-color: #FF0000;
			}
			#id3{
				width: 50px;
				height: 50px;
				background-color: blueviolet;
			}
			#id4{
				width: 300px;
				height: 300px;
				background-color: brown;
			}
			#id5{
				width: 50px;
				height: 50px;
				background-color: aqua;
			}
		</style>
		
	</head>
	<body>
		<!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
		<button type="button" id="btn1" onclick="butclick1();">按钮1</button>
		<button type="button" id="btn2">按钮2</button>
		<button type="button" id="btn3">按钮3</button>
		<div id="id1" onclick="divclick();"></div>
		<div id="id2"></div>
		<div id="id3"></div>
		<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
		<div id="id4" onmouseenter="enterdiv();" onmouseleave="leavediv();" onmousemove="removediv();"></div>
		
		<!-- 3.登入页面 -->
		用户名:<input type="" name="" id="username" value=""  onfocus="inputfocus1();" onblur="inputblur1();"/>
		密码:<input type="" name="" id="pwd" value=""  onfocus="inputfocus2();" onblur="inputblur2();"/>
		<button type="button" onclick="aa();">提交</button>
		
		
		<!-- 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
		<div id="id5"></div>
		<button type="button" onclick="myadd();">添加监听器</button>
		<button type="button" onclick="myremove();">清除监听器</button>
		
	</body>
	
	<script type="text/javascript">
		//1.按钮和DIV的单击事件（三种绑定方式）
		function butclick1()
		{
			console.log('按钮点击！！！')
		}
		//document.getElementById('btn2').onclick = butclick1;
		document.getElementById('btn2').onclick = function()
		{
			console.log('按钮2点击！！！')
		}
		document.getElementById('btn3').addEventListener('click',function()
		{
			console.log('按钮3点击！！！')
		})
		
		function divclick()
		{
			console.log('DIV点击！！！')
		}
		//document.getElementById('id2').onclick = divclick;
		document.getElementById('id2').onclick = function()
		{
			console.log('id2点击！！！')
		}
		document.getElementById('id3').addEventListener('click',function()
		{
			console.log('id3点击！！！')
		})
		
		//2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		// function enterdiv(){
		// 	console.log('进入元素')
		// 	document.getElementById('id4').style.backgroundColor = 'blue' 
		// }
		// document.getElementById('id4').onmouseenter = function(){
		// 	console.log('进入元素2')
		// }
		document.getElementById('id4').addEventListener('mouseenter',function(){
			console.log('进入元素3')
		})
		
		// function leavediv(){
		// 	console.log('离开元素')
		// 	document.getElementById('id4').style.backgroundColor = 'red'
		// }
		// document.getElementById('id4').onmouseleave = function(){
		//  	console.log('离开元素2')
		// }
		  document.getElementById('id4').addEventListener('mouseleave',function(){
		 	console.log('离开元素3')
		 })
		
		// function removediv(){
		// 	console.log('移动元素')
		// }
		// document.getElementById('id4').onmousemove = function(){
		//  	console.log('移动元素2')
		// }
		   document.getElementById('id4').addEventListener('mousemove',function(){
		 	console.log('移动元素3')
		 })
		 
		// 3.登入页面
		 function inputfocus1(){
			 console.log('用户在输入名称')
		 }
		 function inputblur1(){
			 if(document.getElementById('username').value == ''){
				 alert('没有输入用户名')
			 }
		 }
		 function inputfocus2(){
			 console.log('用户在输入密码')
		 }
		 function inputblur2(){
			 if(document.getElementById('pwd').value == ''){
				 alert('没有输入密码')
			 }
		 }
		 function aa(){
			 if (document.getElementById('username').value == '' && document.getElementById('pwd').value == '')
			 {
			 	alert('用户名和密码为空')
			 } else if(document.getElementById('username').value == ''){
				 alert('用户名为空')
			 }else if(document.getElementById('pwd').value == ''){
			 	alert('密码为空')
			 }else{
				 alert('提交成功！');
			 }
			 
		 }
		 
		 
		 
		// 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function rediv(){
			console.log('DIV移动事件')
		}
		
		function myadd()
		{
			document.getElementById('id5').addEventListener('mousemove',rediv)
		}
		function myremove()
		{
			document.getElementById('id5').removeEventListener('mousemove',rediv)
		}
		
	</script>
	
	
	<!-- 1.按钮和DIV的单击事件（三种绑定方式）
	2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
	3.登入页面
	用户名输入框，
	密码输入框，
	提交按钮
	
	任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
	         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
	         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
	
</html>
